<%--
  Created by IntelliJ IDEA.
  User: 28101
  Date: 2021/9/16
  Time: 14:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="jstl" %>
<html>
<head>
    <link href="/css/bootstrap-theme.css" rel="stylesheet">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/phoneindex.css" rel="stylesheet">
    <link href="../css/animate.min.css" rel="stylesheet">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <title>phoneIndex</title>
</head>
<body style="background-color: rgba(217,216,210,0.33)">

    <div class="tabdiv">
        <ul>
            <li class="bigli phoneli">

                <jstl:forEach var="phone" items="${commodityList }">
                    <jstl:forEach var="phoneImg" items="${phone.commodityImgs }">
                        <jstl:if test="${phoneImg.isbigindex == 1}">

                            <a href="/CommodityServlet?method=getCommodityById&pid=${phone.pid}">
                                <font style="top: 20px;position: relative;">
                                    <div style="text-align: left;padding-left: 25px;font-size: 40px">MIX</div>
                                    <div style="text-align: left;padding-left: 25px;font-size: 40px">FOLD</div>
                                    <div style="text-align: left;padding-left: 25px;font-size: 20px">小米折叠屏手机</div>
                                </font>
                                <br/>
                                <img src="/imgs/${phoneImg.src}" class="bigimg" width="200px" height="40%" /><br/>

                            </a>

                        </jstl:if>
                    </jstl:forEach>

                </jstl:forEach>
            </li>

            <%
                int i = 0;
            %>
            <jstl:forEach var="phone" items="${commodityList }" begin="0" end="8">
            <li class="phoneli">
                <a href="/CommodityServlet?method=getCommodityById&pid=${phone.pid}">
                    <jstl:forEach var="phoneImg" items="${phone.commodityImgs }">
                        <jstl:if test="${phoneImg.isindex == 1}">
                            <img src="/imgs/${phoneImg.src}" width="200px" height="200px" /><br/>
                        </jstl:if>
                    </jstl:forEach>

                    ${phone.commodityName } <p/>
                </a>

                <jstl:forEach var="phoneVersion" items="${phone.commodityVersion }">
                    <jstl:if test="${phoneVersion.vdefault == 1}">
                        <font color="red">最低 ${phoneVersion.oprice} 起</font><br/>
                    </jstl:if>
                </jstl:forEach>

            </li>
            </jstl:forEach>
        </ul>
    </div>

    <script src="/js/bootstrap.min.js"></script>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script>
        $("a").hover(function () {
            $(this).parent().addClass('animated pulse');
        });

        $("a").mouseleave(function () {
            $(this).parent().removeClass('pulse');
        });

    </script>
</body>
</html>
